<template>
	<div class="role">
		<el-dialog title="编辑信息" :visible="dialogFormVisible" :close-on-click-modal="false" width="700px" :before-close="handleClose">
			<div class="tab">
				<el-form ref="form" :rules="rules" :model="form" label-width="80px">
					<el-form-item label="状态">
						<el-select v-model="form.status" placeholder="请选择状态" style="width: 100%;">
							<el-option label="正常" :value="1"></el-option>
							<el-option label="禁用" :value="0"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="角色">
						<el-select
							v-model="form.role"
							multiple
							placeholder="请选择"
							style="width:100%;">
							<el-option
								v-for="item in options"
								:key="item.flag"
								:label="item.name"
								:value="item.flag">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="手机号" prop="phone" required>
						<el-input v-model="form.phone" ></el-input>
					</el-form-item>
					<el-form-item label="邮箱" prop="email" required>
						<el-input v-model="form.email"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="createProject('form')">提 交</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { getHeader } from '@/app.config'
export default {
	name: 'retestTask',
	data(){
		// 手机号码验证
		let contactPhone = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('手机号不能为空'))
				} else {
					const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
					if (reg.test(value)) {
						callback()
					} else {
						return callback(new Error('请输入正确的手机号'))
					}
				}
			}
		return {
			dialogFormVisible:false,
			form:{},
			id:'',
			options:{},
			rules: {
				email: [
					{max: 100, message: '邮箱地址不能超过100个字符', trigger: 'blur'},
					{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
					{
						type: 'email',
						message: '请输入正确的邮箱地址'
					},
				],
				phone: [
					{max: 20, message: '手机号不能超过20个字符', trigger: 'blur'},
					{ validator: contactPhone, required: true, message: '请输入手机号', trigger: 'blur' }
				],
			}
		}
	},
	created() {

	},
	methods:{
		handleClose(){
			this.dialogFormVisible = false
		},
		createProject(form){
			this.$refs[form].validate((valid) => {
				if(valid){
					var source = `${process.env.VUE_APP_KANBAN_HOST}/api/v1/user/${this.id}`;

					var data = this.form

					this.$axios.post(source,data,{headers: getHeader()})
						.then((response) => {
							if (response.status == 200) {
								this.dialogFormVisible = false
								this.$parent.initTable()
								this.form ={}
								this.$message.success("修改成功!")
							}
						}).catch((err) => {
						console.log(err);
					});
				}
			})

		},
		initData(data){
			this.id = data

			var source = `${process.env.VUE_APP_KANBAN_HOST}/api/v1/user/${data}`;
			this.$axios.get(source, {headers: getHeader()})
				.then((response) => {
					if (response.status == 200) {
						this.form = response.data.data
					}
				})
				.catch((err) => {
					console.log(err);
				});

			var source1 = `${process.env.VUE_APP_KANBAN_HOST}/api/v1/role`;
			this.$axios.get(source1, {headers: getHeader()})
				.then((response) => {
					if (response.status == 200) {
						this.options = response.data.data
					}
				})
				.catch((err) => {
					console.log(err);
				});

		}
	}

}
</script>

<style lang="scss" scoped>
.role{
	.tab{
		width: 560px;
		margin: 0 0 0 40px;
	}
}
</style>
